interface scaleOptions {
  width: number,
  height: number,
  mode: 'full' | 'equal' // 模式 full 全屏 ， equal 等比
}

const defaultOptions: scaleOptions = {
  width: 1920,
  height: 1080,
  mode: "full"
}


/**
 * 防抖函数
 * @param {Function} fn
 * @param {number} delay
 * @returns {() => void}
 */
function debounce(fn: Function, delay: number): () => void {
  // let timer: NodeJS.Timer;
  let timer: any;
  return function (...args: any[]): void {
    if (timer) clearTimeout(timer);
    timer = setTimeout(
      () => {
        typeof fn === "function" && fn.apply(null, args);
        clearTimeout(timer);
      },
      delay > 0 ? delay : 100
    );
  };
}

/*scale*/
export const autoScale = (selector, options: scaleOptions = defaultOptions) => {
  const el = document.querySelector(selector)
  const {width, height} = options
  el.style.width = `${width}px`
  el.style.height = `${height}px`
  el.style.position = 'relative'
  el.style.transformOrigin = 'top left'
  el.style.transition = 'transform 0.3s'

  function init() {
    const scaleX = innerWidth / width
    const scaleY = innerHeight / height
    if (options.mode == "full") {
      el.style.transform = `scale(${scaleX}, ${scaleY})`
    } else {
      const scale = Math.min(scaleX, scaleY)

      //居中
      const left = (innerWidth - width * scale) / 2
      const top = (innerHeight - height * scale) / 2

      el.style.transform = `translate(${left}px,${top}px) scale(${scale})`
    }

  }
  const deb = debounce(init, 500)
  const initScale = () => {
    init()
    window.addEventListener("resize", deb)
  }

  const clearListener = () => {
    window.removeEventListener("resize", deb)
  }

  return {
    initScale,
    clearListener
  }
}
// import {debounce} from "@pureadmin/utils";
// import {reactive, nextTick} from "vue";
// import type { Ref } from 'vue'
// interface scaleOptions {
//   width: number,
//   height: number,
//   mode: 'full' | 'equal ' // 模式 full 全屏 ， equal 等比
// }
//
// const defaultOptions: scaleOptions = {
//   width: 1920,
//   height: 1080,
//   mode: "full"
// }
//
//
// /*scale*/
// export const autoScale = (selector, options: scaleOptions = defaultOptions) => {
//   const el = document.querySelector(selector)
//   const {width, height} = options
//
//   el.style.transformOrigin = 'top left'
//   el.style.transition = 'transform 0.5s'
//
//   function init() {
//     const scaleX = innerWidth / width
//     const scaleY = innerHeight / height
//     if (options.mode == "full") {
//       el.style.transform = `scale(${scaleX}, ${scaleY})`
//     } else {
//       const scale = Math.min(scaleX, scaleY)
//
//       //居中
//       const left = (innerWidth - width * scale) / 2
//       const top = (innerHeight - height * scale) / 2
//
//       el.style.transform = `translate(${left}px,${top}px) scale(${scale})`
//     }
//
//   }
//
//   init()
//   const deb = debounce(init, 500, false)
//   addEventListener("resize", init)
// }
//
// interface IState {
//   originalWidth: string | number;
//   originalHeight: string | number;
//   width?: string | number;
//   height?: string | number;
//   observer: null | MutationObserver;
// }
//
// export const scaleScreen = (screenWrapper: Ref<HTMLElement>, box :Ref<HTMLElement>, options: scaleOptions = defaultOptions) => {
//
//   const state = reactive<IState>({
//     width: 0,
//     height: 0,
//     originalWidth: 0,
//     originalHeight: 0,
//     observer: null,
//   });
//
//   const styles = {
//     box: {
//       overflow: "hidden",
//       backgroundSize: `100% 100%`,
//       background: `#000`,
//       width: `100vw`,
//       height: `100vh`,
//     },
//     wrapper: {
//       transitionProperty: `all`,
//       transitionTimingFunction: `cubic-bezier(0.4, 0, 0.2, 1)`,
//       transitionDuration: `500ms`,
//       position: `relative`,
//       overflow: `hidden`,
//       zIndex: 100,
//       transformOrigin: `left top`,
//     },
//   };
//
//   /**
//    * 初始化大屏容器宽高
//    */
//   const initSize = () => {
//     return new Promise<void>((resolve) => {
//       box.value!.scrollLeft = 0;
//       box.value!.scrollTop = 0;
//       nextTick(() => {
//         // region 获取大屏真实尺寸
//         if (options.width && options.height) {
//           state.width = options.width;
//           state.height = options.height;
//         } else {
//           state.width = screenWrapper.value?.clientWidth;
//           state.height = screenWrapper.value?.clientHeight;
//         }
//         // endregion
//
//         // region 获取画布尺寸
//         if (!state.originalHeight || !state.originalWidth) {
//           state.originalWidth = window.screen.width;
//           state.originalHeight = window.screen.height;
//         }
//         // endregion
//         resolve();
//       });
//     });
//   };
//
//   /**
//    * 更新大屏容器宽高
//    */
//   const updateSize = () => {
//     if (state.width && state.height) {
//       screenWrapper.value!.style.width = `${state.width}px`;
//       screenWrapper.value!.style.height = `${state.height}px`;
//     } else {
//       screenWrapper.value!.style.width = `${state.originalWidth}px`;
//       screenWrapper.value!.style.height = `${state.originalHeight}px`;
//     }
//   };
//   const clearScreenWrapperStyle = () => {
//     screenWrapper.value!.style.transform = "";
//     screenWrapper.value!.style.margin = "";
//   };
//   const autoScale = (scale: number) => {
//     const domWidth = screenWrapper.value!.clientWidth;
//     const domHeight = screenWrapper.value!.clientHeight;
//     const currentWidth = document.body.clientWidth;
//     const currentHeight = document.body.clientHeight;
//     screenWrapper.value!.style.transform = `scale(${scale},${scale})`;
//     let mx = Math.max((currentWidth - domWidth * scale) / 2, 0);
//     let my = Math.max((currentHeight - domHeight * scale) / 2, 0);
//
//     screenWrapper.value!.style.margin = `${my}px ${mx}px`;
//   };
//   const updateScale = () => {
//     // 获取真实视口尺寸
//     const currentWidth = document.body.clientWidth;
//     const currentHeight = document.body.clientHeight;
//     // 获取大屏最终的宽高
//     const realWidth = state.width || state.originalWidth;
//     const realHeight = state.height || state.originalHeight;
//     // 计算缩放比例
//     const widthScale = currentWidth / +realWidth;
//     const heightScale = currentHeight / +realHeight;
//     // 若要铺满全屏，则按照各自比例缩放
//     if (options.mode == "full") {
//       screenWrapper.value!.style.transform = `scale(${widthScale},${heightScale})`;
//       return false;
//     }
//     // 按照宽高最小比例进行缩放
//     const scale = Math.min(widthScale, heightScale);
//     autoScale(scale);
//   };
//
//   const onResize = debounce(async () => {
//     await initSize();
//     updateSize();
//     updateScale();
//   }, 500);
//   const initMutationObserver = () => {
//     const observer = (state.observer = new MutationObserver(() => {
//       onResize();
//     }));
//     observer.observe(screenWrapper.value!, {
//       attributes: true,
//       attributeFilter: ["style"],
//       attributeOldValue: true,
//     });
//   };
//
//   const clearListener = () => {
//     window.removeEventListener("resize", onResize);
//     // state.observer?.disconnect();
//   };
//
//   const addListener = () => {
//     window.addEventListener("resize", onResize);
//     // initMutationObserver();
//   };
//
//   const initScale = async () => {
//     await initSize();
//     updateSize();
//     updateScale();
//     addListener();
//   }
//   return {
//     styles,
//     initScale,
//     initSize,
//     updateSize,
//     autoScale,
//     updateScale,
//     onResize,
//     clearListener,
//     clearScreenWrapperStyle,
//     addListener
//   }
// }
